<!--
 * @Author: liukeke
 * @Date: 2022-10-24 14:22:53
 * @LastEditTime: 2022-10-24 17:56:04
 * @Description: 
-->
<template>
  <div>
        <el-row>
        <el-col :span="3">
          <!-- default-expand-all  是否展开所有节点 -->
          <el-tree
            :data="data"
            node-key="id"
            default-expand-all
            @node-drag-start="handleDragStart"
            @node-drag-end="handleDragend"
            draggable
            :allow-drop="allowDrop"
            :allow-drag="allowDrag"
          >
          </el-tree>
          <!-- :allow-drop="allowDrop"
                                  :allow-drag="allowDrag" -->
        </el-col>
        <el-col :span="21">
          <el-row type="flex" :gutter="10" justify="center">
            <el-col :span="8">&nbsp;</el-col>
            <el-col :span="12"
              ><div class="grid-content bg-purple">
                <el-button-group>
                  <el-button
                    :type="classtype1"
                    @click="tabRow('classtype1',1)"
                    >单屏</el-button
                  >
                  <el-button
                    :type="classtype2"
                    @click="tabRow('classtype2',2)"
                    >四分屏</el-button
                  >
                  <el-button
                    :type="classtype3"
                    @click="tabRow('classtype3',3)"
                    >九分屏</el-button
                  >
                  <el-button
                    :type="classtype4"
                    @click="tabRow('classtype4',4)"
                    >十六分屏</el-button
                  >
                </el-button-group>
              </div>
            </el-col>
            <el-col :span="4">&nbsp;</el-col>
          </el-row>

          <el-container class="center">
            <el-main>
              <el-row :gutter="24">
                <el-col
                  v-for="(videoItem, index) in videoList"
                  :span="rowNumber"
                  :class="videoclass"
                  :key="index"
                  :style="{height:videoItemHeight}"
                >
                  <div
                    class="player-wrapper"
                    element-loading-text="加载中..."
                    element-loading-background="#000"
                  >
                    <div
                      class="video-wrapper"
                      :style="videoclass"
                      :id="`videoid${videoItem}`"
                    >
                      <div
                        class="video-inner live hide-waiting"
                        style="
                          position: absolute;
                          top: 0px;
                          bottom: 0px;
                          left: 0px;
                          right: 0px;
                        "
                      >

                      <!-- @dragover.prevent  给视频区域外层盒子添加拖拽事件 -->
                        <div class="alt table-c"  @drop="dropVideo(videoItem)" @dragover.prevent>
                          <div class="talbetop">
                            <table>
                              <!-- 还未展示视频时的封面 -->
                              <tr v-if="!videoItem.src" > 
                                <td>暂时还未接入视频哦~</td>
                              </tr>
                              <tr v-if="videoItem.src">
                                <video
                                  controls="controls"
                                  muted
                                  :src="videoItem.src"
                                ></video>
                              </tr>
                            </table>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-main>
          </el-container>
        </el-col>
      </el-row>
  </div>
</template>

<script>
  export default {
    name:'test2',
       data() {
    return {
        dropData:null,
      id:0,
      xinhao:true,
      allTree: [],
      filterText: "",
      //   fornum: 4,
      clonum: 12,
      videoclass:
        "padding-bottom: 54%; position: relative; margin: 0px auto; overflow: hidden;",
      classtype1: "",
      classtype2: "primary",
      classtype3: "",
      classtype4: "",

      videoList:[],

      // 总宽度为24份，默认的四个框的时候
      videoItemHeight: '50%',
      rowNumber: 12,
      data: [
        {
          id: 1,
          label: "西宁市",
          children: [
                {
                  type: "rtmp/mp4",
                  id: 3,
                  label: "山川",
                  src: "https://video-qn.51miz.com/preview/video/00/00/13/70/V-137009-A4970EDC.mp4",
                },
                {
                  type: "rtmp/mp4",
                  id: 4,
                  label: "旬月",
                  src: "https://video-qn.51miz.com/preview/video/00/00/15/79/V-157932-0D388B9F.mp4",
                },
                {
                  type: "rtmp/mp4",
                  id: 5,
                  label: "森林",
                  src: "https://video-qn.51miz.com/preview/video/00/00/11/32/V-113247-63975F10.mp4",
                },
                {
                  type: "rtmp/mp4",
                  id: 6,
                  label: "科技",
                  src: "https://video-qn.51miz.com/preview/video/00/00/12/49/V-124926-533372CA.mp4",
                },
                {
                  type: "rtmp/mp4",
                  id: 7,
                  label: "天空",
                  src: "https://video-qn.51miz.com/preview/video/00/00/15/65/V-156581-C4DB8F20.mp4 ",
                },
                {
                  type: "rtmp/mp4",
                  id: 8,
                  label: "海滩",
                  src: "https://video-qn.51miz.com/preview/video/00/00/15/21/V-152102-13B4D044.mp4",
                },
                {
                  type: "rtmp/mp4",
                  id: 9,
                  label: "白云",
                  src: "https://video-qn.51miz.com/preview/video/00/00/12/30/V-123077-A1EA0893.mp4",
                },
                {
                  type: "rtmp/mp4",
                  id: 10,
                  label: "红色",
                  src: "https://video-qn.51miz.com/preview/video/00/00/14/33/V-143360-2F7C34AD.mp4",
                },
                {
                  type: "rtmp/mp4",
                  id: 11,
                  label: "烟火",
                  src: "https://video-qn.51miz.com/preview/video/00/00/15/34/V-153443-20A3FA57.mp4",
                },
                {
                  type: "rtmp/mp4",
                  id: 12,
                  label: "水光",
                  src: "https://video-qn.51miz.com/preview/video/00/00/15/85/V-158541-2BE20959.mp4",
                },
                {
                  type: "rtmp/mp4",
                  id: 13,
                  label: "草原",
                  src: "https://video-qn.51miz.com/preview/video/00/00/15/08/V-150836-E1DDBB18.mp4",
                },
                {
                  type: "rtmp/mp4",
                  id: 14,
                  label: "舞台",
                  src: "https://video-qn.51miz.com/preview/video/00/00/14/28/V-142849-61113C76.mp4",
                },
                {
                  type: "rtmp/mp4",
                  id: 15,
                  label: "月夜",
                  src: "https://video-qn.51miz.com/preview/video/00/00/15/81/V-158199-1E165B92.mp4",
                },
                {
                  type: "rtmp/mp4",
                  id: 16,
                  label: "黛青",
                  src: "https://video-qn.51miz.com/preview/video/00/00/15/86/V-158640-4D33212E.mp4",
                },
                {
                  type: "rtmp/mp4",
                  id: 17,
                  label: "桃花",
                  src: "https://video-qn.51miz.com/preview/video/00/00/15/86/V-158644-1598F17E.mp4",
                },
                {
                  type: "rtmp/mp4",
                  id: 18,
                  label: "粒子",
                  src: "https://video-qn.51miz.com/preview/video/00/00/14/97/V-149734-8E0014B0.mp4",
                },
              ],
        },
      ],

      defaultProps: {
        children: "children",
        label: "label",
      },

    };
  },

    watch: {
  },
  created() {
    this.addVideo(4)
  },

  methods: {
       filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },



    // 拖拽开始
    handleDragStart(node, ev) {
        console.log(node,ev);
         this.dropData = JSON.stringify(node.data.src)
          console.log( this.dropData);
    //   ev.dataTransfer.setData("n", JSON.stringify(node.data));
    },

        // 拖拽结束
        handleDragend (draggingNode, endNode, position, event) {
          console.log(draggingNode, endNode, position, event,"我是结束");
          //通过video标签赋值的话这里取不到video
          if(draggingNode.level == 2) {

          }
        },

        allowDrop(draggingNode, dropNode, type) {
      return false;
    },
    allowDrag(draggingNode) {
      return true;
    },
//     nodeClick(a,b,c){
// console.log(a,b,c,777777);
//     },
      dropVideo(videoItem){
        // console.log(this.dropData);
        console.log(videoItem,1244);
        console.log( this.dropData,7777777777777777777);
        // this.dropData[0].src
    //   let data = n.dataTransfer.getData("n");
    //   this.rightList.push(JSON.parse(data))
    // videoItem.src = this.dropData
      },


            // 切换不同的窗口
      tabRow(item,rowNum){
        //分屏按钮效果的判断
                  if (item === "classtype1") {
                this.classtype1 = "primary";
                this.classtype2 = "";
                this.classtype3 = "";
                this.classtype4 = "";
            } else if (item === "classtype2") {
                this.classtype1 = "";
                this.classtype2 = "primary";
                this.classtype3 = "";
                this.classtype4 = "";
            }else if (item === "classtype3") {
                this.classtype1 = "";
                this.classtype2 = "";
                this.classtype3 = "primary";
                this.classtype4 = "";
            } else if (item === "classtype4") {
                this.classtype1 = "";
                this.classtype2 = "";
                this.classtype3 = "";
                this.classtype4 = "primary";
            }
      // 1*1 ，2*2，3*3,4*4，因为矩阵的 排 和 列 的个数都是一样的
      this.rowNumber = 24 / rowNum // 宽度
      this.videoItemHeight = (100 / rowNum) + '%' // 高度
      this.addVideo(rowNum * rowNum) // 个数
    },

          // 添加视频布局的公共函数
    addVideo(forNum){
      // console.log(forNum);
      this.videoList = []
      for (let index = 0; index < forNum; index++) {
        this.videoList.push({index:index,src:null,loading:false})
      }
    }, 

      
      }
  }
</script>

<style lang="less" scoped>
   .video-wrapper {
  position: relative;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}
.alt {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #000;
  color: #fff;
  text-align: center;
}
.alt table {
  width: 100%;
  height: 100%;
}
.alt video {
  width: 100%;
  height: 100%;
}
.talbetop {
  width: 100%;
  height: 100%;
  position: relative;
}
.selectchannel {
  position: absolute;
  right: 5px;
  top: 5px;
}
.video-close {
  position: absolute;
  top: 5px;
  right: 5px;
  color: #fff;
  font-size: 12px;
  background-color: hsla(0, 0%, 50%, 0.5);
  padding: 2px 5px;
  cursor: pointer;
  border-radius: 2px;
  max-width: 120px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.table-c table {
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}
.table-c table td {
  border-left: 2px solid #fff;
  border-top: 2px solid #fff;
}

.player-wrapper {
  padding-bottom: 10px;
}
::v-deep .el-tree-node__content {
  height: 30px;
}

.menu-list {
  li{
    height: 40px;
    line-height: 40px;
    text-align: left;
    padding: 0 10px;
    cursor: pointer;
    transition: all 1s ease;
  }
  li:hover{
    background: #e9eef3;
  }
}
</style>